<template>
	<view class="project_content">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
		    <block slot="backText">返回</block>
		    <block slot="content">项目详情</block>
		</cu-custom>
		<!-- 图片列表详情展示 -->
		<swiper class="image_list" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<image :src="item.src" class="image_detail"></image>
			</swiper-item>
		</swiper>
		<br/>

		<!-- 文本展示 -->
		<view class="project_text_message">
			<div v-html="content"></div>
		</view>
		
		<!-- 视频内容 -->
		<!-- <view class="project_video">
			<video :src="videoUrl" :controls="true" width="400" height="300"></video>
		</view> -->
		<h1>推荐项目</h1>
		<view class="image_content">
			<ul class="ul_content" v-for="(item, index) in imgList" :key="index">
				<navigator url="/pages/indexMessage/indexMessage">
					<view class="content_image_t">
						<image :src="item.src" class="slide-image"></image>
						<p>个人博客管理系统</p>
					</view>
				</navigator>
			</ul>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 videoUrl: '/static/video/课程导学.mp4' ,// 视频文件路径，根据实际路径设置
				 imgList: [
                    { id: 1, src: '../../static/detailsImage/myblog/one.jpg' },
					{ id: 2, src: '../../static/detailsImage/myblog/two.jpg' },
					{ id: 3, src: '../../static/detailsImage/myblog/three.jpg' },
					{ id: 4, src: '../../static/detailsImage/myblog/four.jpg' },
					{ id: 5, src: '../../static/detailsImage/myblog/five.jpg' },
                ],
				  content: '', // 项目内容
			}
		},
		methods: {
			
		},
		onLoad: function(option) { 
			// const item= JSON.parse(decodeURIComponent(option.item));
			// this.imgList = item.detailImageAddress.split(",");
			// this.content= item.textContent
		}
	}
</script>

<style scoped>
	video {
	  width: 80%;
	  height: 400px;
	}
	.project_video{
		margin-top: 50px;
		text-align: center;
	}
	h1{
		margin-bottom: 20px;
	}
	h3{
		margin-bottom: 20px;
	}
	.image_content{
		  display: grid;
		  grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr)); /* 自动填充，每列最小宽度50%减去间隔，最大宽度为1fr */
		  gap: 10px; /* 图片间隔 */
	}
	
	.slide-image{
	   width: 90%; /* 图片宽度占满每个格子 */
	   height: 110px; /* 让图片高度自适应 */
	}
	.content_image_t{
		text-align: center;
	}
	.ul_content{
		padding: 0px;
	}
	
	.image_list{
		text-align: center;
		padding: 0px;
	}
	.image_list_content{
		padding: 0px;
	}
	.image_detail{
		width: 80%;
		height: 400px;
		padding: 0px;
	}
	.project_text_message{
		margin-left: 10%;
	}
</style>
